
import { io } from "socket.io-client";
import { useEffect, useState } from "react";
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/token";
import classNames from "classnames";
import { Socket } from "socket.io-client";
import { useRef } from "react";
import styles from "./styles/styles.module.less";
import Header from "@shared/header";
import Back from "@shared/back";
import GeekIcon from "@shared/geekIcon";
import { useLocation } from "react-router-dom";
import { baseURL } from "./utils/request";
// 由于 io 声明后未使用，暂时注释掉该导入






interface Message {
  type: "robot" | "user";
  message: string;
}

export default function Chat() {
  // 在组件挂载时隐藏底部导航
  // useEffect(() => {
  //   const footer = document.querySelector('.footer-nav') as HTMLElement; // 添加类型断言
  //   if (footer) {
  //     footer.style.display = 'none';
  //   }

  //   return () => {
  //     // 组件卸载时恢复底部导航
  //     if (footer) {
  //       footer.style.display = 'block';
  //     }
  //   };
  // }, []);


  // const token = useTypedSelector(selectToken);
  // const [messages, setMessages] = useState<Message[]>([]);

  // // 参数
  // // 1) 连接地址，此处连接地址可以是 ws 协议也可以是 http 协议
  // // socket.io 内部做了兼容处理, 如果服务端支持 websocket, 就使用它, 不支持则使用轮询策略
  // // 2) 配置选项
  // const socket = io("https://geek.itheima.net", {
  // // query 表示查询参数
  //   query: {
  //     token,
  //   },
  //   // 主动告诉 socket.io 该服务端支持 websocket 协议, 不需要尝试轮询操作
  //   // 该配置选项的默认值为 ['polling','websocket']
  //   transports: ["websocket"],
  // });

  // // 当连接成功时
  // socket.on("connect", () => {
  //   console.log("websocket 连接成功");
  //   // 断开连接
  //   socket.disconnect();
  // });

  // // 当连接断开时
  // socket.on("disconnect", () => {
  //   console.log("websocket 断开连接");
  // });


  // useEffect(() => {
  //   // 建立连接
  //   const socket = io("https://geek.itheima.net", {
  //     query: {
  //       token,
  //     },
  //     transports: ["websocket"],
  //   });
  //   // 监听连接成功
  //   socket.on("connect", () => {
  //     console.log("websocket 连接成功");
  //     // 设置默认消息列表
  //     setMessages([
  //       { type: "robot", message: "您好，小智同学为您服务。" },
  //       { type: "robot", message: "请问有什么可以帮您" },
  //     ]);
  //   });
  //   // 监听断开连接
  //   socket.on("disconnect", () => {
  //     console.log("websocket 断开连接");
  //   });
  //   // 组件销毁时执行
  //   return () => {
  //     // 断开连接
  //     socket.disconnect();
  //   };
  // }, [token]);

  // // 用于存储用户在文本框中输入的内容
  // const [message, setMessage] = useState("");
  // // 用于保存 socket 实例对象
  // const socketRef = useRef<Socket | null>(null);
  // // 用于保存滚动容器 DOM 对象
  // const scrollContainer = useRef<HTMLUListElement | null>(null);

  // // 发送消息
  // const sendMessage = () => {
  //   // 将消息添加到本地消息列表
  //   setMessages([...messages, { type: "user", message }]);
  //   // 向服务器端发送消息
  //   socketRef.current?.emit("chat_message", {  // 修改为chat_message
  //     msg: message,
  //     timestamp: Date.now() + "",
  //   });
  //   // 清空文本框中的消息
  //   setMessage("");
  // };

  // // websocket
  // useEffect(() => {
  //   // 保存 socket 实例对象
  //   socketRef.current = socket;
  //   // 监听服务端响应信息
  //   socket.on("chat_message", (response) => {  // 修改为chat_message
  //     // 将消息添加到本地消息列表
  //     setMessages((messages) => [
  //       ...messages,
  //       { type: "robot", message: response.msg },
  //     ]);
  //   });
  // }, [token]);

  // // 消息变化滚动到底部
  // useEffect(() => {
  //   if (scrollContainer.current === null) return;
  //   scrollContainer.current.scrollTo({
  //     top: scrollContainer.current.scrollHeight,
  //     behavior: "smooth",
  //   });
  // }, [messages]);



  // return (
  //   <div className={styles.chat}>
  //     <Header title={"小智同学"} left={<Back />} />
  //     <ul className={styles.content} ref={scrollContainer}>
  //       {messages.map((item, index) => (
  //       <li key={index} className={classNames({ [styles.customer]: item.type === "user" })}>
  //         <div className={styles.avatar}>
  //           {item.type === "robot" ? (
  //             <GeekIcon type={"iconbtn_xiaozhitongxue"} />
  //           ) : (
  //             <img src={"http://toutiao.itheima.net/images/user_head.jpg"} alt={""} />
  //           )}
  //         </div>
  //         <div className={styles.say}>{item.message}</div>
  //       </li>
  //     ))}

  //     </ul>
  //     {/* <div className={styles.footer}>
  //       <input value={message} onChange={(e) => setMessage(e.target.value)} type="text"/>
  //       <button onClick={sendMessage}>发送</button>
  //     </div> */}
  //     <div className={styles.footer}>
  //       <div className={styles.edit}>
  //         <GeekIcon type={"iconbianji"} />
  //         <input value={message} onChange={(e) => setMessage(e.target.value)} type="text" />
  //       </div>
  //       <button onClick={sendMessage}>发送</button>
  //     </div>

  //   </div>
  // );












  const token = useTypedSelector(selectToken);
  // 用于存储消息列表
  const [messages, setMessages] = useState<Message[]>([]);

  // const [messages, setMessages] = useState<Message[]>([]);
  // 参数
  // 1) 连接地址，此处连接地址可以是 ws 协议也可以是 http 协议
  // socket.io 内部做了兼容处理, 如果服务端支持 websocket, 就使用它, 不支持则使用轮询策略
  // 2) 配置选项
  const socket = io(baseURL, {
    // query 表示查询参数
    query: {
      token,
    },
    // 主动告诉 socket.io 该服务端支持 websocket 协议, 不需要尝试轮询操作
    // 该配置选项的默认值为 ['polling','websocket']
    transports: ["websocket"],
  });

  // 当连接成功时
  socket.on("connect", () => {
    console.log("websocket 连接成功");
    // 断开连接
    // socket.disconnect();
  });

  // 当连接断开时
  socket.on("disconnect", () => {
    console.log("websocket 断开连接");
  });




  // websocket
  useEffect(() => {
    // 建立连接
    const socket = io(baseURL, {
      query: { token },
      transports: ["websocket"],
      reconnection: true,
      reconnectionAttempts: 3,
      reconnectionDelay: 1000
    });
    socketRef.current = socket;

    socket.on("connect", () => {
      console.log("websocket 连接成功");
      setMessages([
        { type: "robot", message: "您好，小智同学为您服务。" },
        { type: "robot", message: "请问有什么可以帮您" }
      ]);
    });

    socket.on("connect_error", (err) => {
      console.error("连接错误:", err.message);
    });

    return () => {
      socket.disconnect();
    };
  }, [token]);
  const socketRef = useRef<Socket | null>(null);
  // 用于保存滚动容器 DOM 对象
  const scrollContainer = useRef<HTMLUListElement | null>(null);
  // 用于存储用户在文本框中输入的内容
  const [message, setMessage] = useState("");
  // 发送消息
  const sendMessage = () => {
    // 将消息添加到本地消息列表
    setMessages([...messages, { type: "user", message }]);
    // 向服务器端发送消息
    socketRef.current?.emit("message", {
      msg: message,
      timestamp: Date.now() + "",
    });
    // 清空文本框中的消息
    setMessage("");
  };

  // websocket
  useEffect(() => {
    // 保存 socket 实例对象
    socketRef.current = socket;
    // 监听服务端响应信息
    socket.on("message", (response) => {
      // 将消息添加到本地消息列表
      setMessages((messages) => [
        ...messages,
        { type: "robot", message: response.msg },
      ]);
    });
  }, [token]);

  // 消息变化滚动到底部
  useEffect(() => {
    if (scrollContainer.current === null) return;
    scrollContainer.current.scrollTo({
      top: scrollContainer.current.scrollHeight,
      behavior: "smooth",
    });
  }, [messages]);






  return (
    <div className={styles.chat}>
      <Header title={"小智同学"} left={<Back />} />
      <ul className={styles.content} ref={scrollContainer}>
        {messages.map((item, index) => (
          <li key={index} className={classNames({ [styles.customer]: item.type === "user" })}>
            <div className={styles.avatar}>
              {item.type === "robot" ? (
                <GeekIcon type={"iconbtn_xiaozhitongxue"} />
              ) : (
                <img src="http://toutiao.itheima.net/images/user_head.jpg" alt="avatar"/>
              )}
            </div>
            <div className={styles.say}>{item.message}</div>
          </li>
        ))}
      </ul>
      <div className={styles.footer}>
        {/* <div className={styles.edit}>
          <GeekIcon type={"iconbianji"} />
          <input type="text" placeholder="请描述你的问题" />
        </div>
        <button>发送</button> */}
        <div className={styles.edit}>
          <GeekIcon type={"iconbianji"} />
          <input value={message} onChange={(e) => setMessage(e.target.value)} type="text" placeholder="请描述你的问题" />

        </div>
          <button onClick={sendMessage}>发送</button>

      </div>
    </div >
  );





}
